<template>
	<view class="content">
		<view class="menuBox" v-for="(item, index) in menuList" :key="item.id">
			<view class="menuLeft">
				<view class="menuIcon">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="menuTitle">
					{{item.title}}
				</view>
			</view>
			<view class="menuRight">
				<image src="/static/menuListImg/右箭头.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "userMenuList",
		data() {
			return {
				menuList: [{
						id: 1,
						title: "帮助与客服",
						icon: "/static/menuListImg/帮助与客服.png",
						url: ""
					},
					{
						id: 2,
						title: "收货地址管理",
						icon: "/static/menuListImg/收货地址管理.png",
						url: ""
					},
					{
						id: 3,
						title: "账户管理",
						icon: "/static/menuListImg/账户管理.png",
						url: ""
					},
					{
						id: 4,
						title: "我的收藏",
						icon: "/static/menuListImg/我的收藏.png",
						url: ""
					},
					{
						id: 5,
						title: "到货通知",
						icon: "/static/menuListImg/到货通知.png",
						url: ""
					},
					{
						id: 6,
						title: "售后服务",
						icon: "/static/menuListImg/售后服务.png",
						url: ""
					},
					{
						id: 7,
						title: "我的积分",
						icon: "/static/menuListImg/我的积分.png",
						url: ""
					},
				]
			};
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #191A1C;

		.menuBox {
			// border: 1px solid crimson;
			width: 750rpx;
			height: 100rpx;
			padding: 10rpx 20rpx;
			display: flex;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			.menuLeft {
				// border: 1px solid saddlebrown;
				width: 90%;
				display: flex;

				.menuIcon {
					// border: 1px solid salmon;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 15rpx;


				}

				.menuTitle {
					// border: 1px solid black;
					display: flex;
					align-items: center;
				}
			}

			.menuRight {
				// border: 1px solid darkcyan;
				width: 10%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}


	}
</style>